import React, { useState } from 'react'
import './index.css'
import { Outlet } from 'react-router-dom'
import { Button, Menu } from 'antd'
import { items } from './fields'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'


const Page: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false)
  const [menuWidth, setMenuWidth] = useState(256)
  const toggleCollapsed = () => {
    setCollapsed(!collapsed)
    if (collapsed) {
      setMenuWidth(300)
    } else setMenuWidth(80)
  }
  return (<>
    <div className={'sys-page-container'}>
      <div style={{ width: `${menuWidth}px` }} className={'sys-menu-container'}>
        <div>
          <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </Button>
        </div>
        <Menu mode={'inline'} items={items} inlineCollapsed={collapsed} style={{ width: menuWidth }} />
      </div>
      <div className={'sys-page-container-main'}>
        <Outlet />
      </div>
    </div>
  </>)
}

export default Page
